<template>
  <div
    class="trainingCreate"
    :style="{ height: $store.oj.systemParams.screenHeight * 0.8 + 'px' }"
  >
    <div class="t-header">
      <div class="t-h-title">
        <i class="iconfont icon-liebiao_o"></i>训练题单
      </div>
    </div>
    <div class="t-search">
      <n-input
        class="t-s-input"
        placeholder="搜索训练题目"
        round
        size="small"
        v-model:value="searchVal"
      >
        <template #suffix>
          <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
        </template>
      </n-input>
      <n-button
        class="t-s-btn"
        size="small"
        round
        type="success"
        @click="(isShowAppend = true), getTrainingProbList()"
        ><i class="iconfont icon-tianjia"></i>添加题目</n-button
      >
    </div>
    <div class="t-table">
      <el-table :data="problemList.records" size="small" stripe>
        <el-table-column
          type="index"
          label="序号"
          width="100%"
          align="center"
          :index="indexMethod2"
        />
        <el-table-column
          prop="pid"
          label="题目ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="displayId"
          label="展示ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          align="center"
        ></el-table-column>
        <el-table-column label="序号" align="center" width="120">
          <template #default="scoped">
            <div class="t-t-input">
              <n-input-number
                :min="1"
                :max="10000"
                class="inputNumber"
                placeholder="编号(升序)"
                v-model:value="scoped.row.ranking"
                @blur="updateTrainingProblem(scoped.row)"
              ></n-input-number>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scoped">
            <div class="t-t-comparation">
              <el-tooltip content="编辑" placement="top">
                <n-button class="nbtn" size="tiny" type="info"
                  ><i class="iconfont icon-bianji"></i
                ></n-button>
              </el-tooltip>
              <el-tooltip content="查看" placement="top">
                <n-button class="nbtn" size="tiny" type="success"
                  ><i class="iconfont icon-chakan1"></i
                ></n-button>
              </el-tooltip>
              <el-tooltip content="移除" placement="top">
                <n-button
                  class="nbtn"
                  size="tiny"
                  type="warning"
                  @click="delTrainingProblem(scoped.row.tid, scoped.row.pid)"
                  ><i class="iconfont icon-shanchu"></i
                ></n-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="t-footer">
      <el-pagination
        class="pagination"
        :page-sizes="[20, 50, 100]"
        background
        small
        layout="prev, pager, next,sizes"
        :total="Number(problemList.total)"
        v-model:current-page="searchParams.pageNum"
        v-model:page-size="searchParams.pageSize"
      />
    </div>
    <n-modal v-model:show="isShowAppend">
      <n-card
        :bordered="false"
        role="dialog"
        aria-modal="true"
        class="card"
        :style="{
          height: $store.oj.systemParams.screenHeight * 0.7 + 'px',
          width: $store.oj.systemParams.screenWidth * 0.8 + 'px',
        }"
      >
        <div
          class="container"
          :style="{ height: $store.oj.systemParams.screenHeight * 0.68 + 'px' }"
        >
          <h2 class="bigtitle">题目列表</h2>
          <div class="c-search">
            <n-input
              class="c-s-input"
              placeholder="搜索题目"
              round
              size="small"
              v-model:value="proSearchVal"
            >
              <template #suffix>
                <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
              </template>
            </n-input>
          </div>
          <el-table :data="problem.records" stripe class="problemTable">
            <el-table-column
              type="index"
              label="序号"
              width="100%"
              align="center"
              :index="indexMethod"
            />
            <el-table-column prop="problemId" label="题目ID" />
            <el-table-column prop="title" label="题目">
              <template #default="scoped">
                <div class="problemTable-title">{{ scoped.row.title }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" align="center">
              <template #default="scoped">
                <el-tag
                  round
                  size="small"
                  type="success"
                  v-show="scoped.row.difficulty === 0"
                  >简单</el-tag
                >
                <el-tag
                  round
                  size="small"
                  type="warning"
                  v-show="scoped.row.difficulty === 1"
                  >中等</el-tag
                >
                <el-tag
                  round
                  size="small"
                  type="danger"
                  v-show="scoped.row.difficulty === 2"
                  >困难</el-tag
                >
              </template>
            </el-table-column>

            <el-table-column prop="ioScore" label="操作" align="center">
              <template #default="scoped">
                <div style="display: flex; gap: 10px; justify-content: center">
                  <n-button
                    size="small"
                    type="info"
                    @click="openCheckProblem(scoped.row)"
                    ><i class="iconfont icon-chakan"></i
                  ></n-button>
                  <n-button
                    size="small"
                    type="success"
                    @click="appendToTraining(scoped.row)"
                    ><i class="iconfont icon-tianjia"></i
                  ></n-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="c-footer">
            <el-pagination
              class="pagination"
              :page-sizes="[20, 50, 100]"
              background
              small
              layout="prev, pager, next,sizes"
              :total="Number(problem.total)"
              v-model:current-page="probParams.pageNum"
              v-model:page-size="probParams.pageSize"
            />
          </div>
        </div>
      </n-card>
    </n-modal>
    <checkProblem ref="checkProblem"></checkProblem>
  </div>
</template>

<script>
import {
  getTrainingProblemListAPI,
  updateTrainingProblemAPI,
  getTrainingProbListAPI,
  appendTrainingProblemAPI,
  delTrainingProblemAPI,
} from "@/api/adminAPI/adminAPI";
import { ElMessage } from "element-plus";
import checkProblem from "./components/checkProblem.vue";

export default {
  data() {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 20,
        title: "",
        tid: null,
      },
      searchVal: "",
      problemList: {
        records: [],
        total: 10,
      },
      authOptions: [
        {
          label: "公开题目",
          value: 0,
        },
        {
          label: "私有题目",
          value: 1,
        },
      ],
      isShowAppend: false,
      problem: {
        records: [],
        total: 10,
      },
      probParams: {
        pageNum: 1,
        pageSize: 20,
        title: "",
        tid: null,
      },
      proSearchVal: "",
    };
  },
  mounted() {
    this.searchParams.tid = this.$route.params.tid;
    this.probParams.tid = this.$route.params.tid;
    this.getTrainingProblemList();
  },
  methods: {
    //减少请求次数
    updateSearchParams() {
      this.searchParams.title = this.searchVal;
      this.probParams.title = this.proSearchVal;
    },
    openCheckProblem(data) {
      this.$refs.checkProblem.open(data);
    },
    //获取训练题目列表
    async getTrainingProblemList() {
      await getTrainingProblemListAPI(this.searchParams)
        .then((res) => {
          if (res.data.code === 200) {
            this.problemList = res.data.data;
          }
        })
        .catch((err) => {
          console.log("系统错误");
        });
    },
    //更新训练题目
    async updateTrainingProblem(data) {
      await updateTrainingProblemAPI(data)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.msg);
            this.getTrainingProblemList();
          }
        })
        .catch((err) => {
          console.log("系统错误");
        });
    },
    //获取想要添加的题目分页
    async getTrainingProbList() {
      await getTrainingProbListAPI(this.probParams)
        .then((res) => {
          if (res.data.code === 200) {
            this.problem = res.data.data;
          }
        })
        .catch((err) => {
          console.log("系统错误");
        });
    },
    //训练题目的增加
    async appendToTraining(data) {
      const obj = {
        tid: "",
        pid: "",
        ranking: "",
        displayId: "",
      };
      obj.tid = this.searchParams.tid;
      obj.pid = data.id;
      obj.ranking = 1;
      obj.displayId = "p" + data.id;
      await appendTrainingProblemAPI(obj)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.msg);
            this.getTrainingProblemList();
            this.isShowAppend = false;
          }
        })
        .catch((err) => {
          console.log("系统错误");
        });
    },
    //训练题目的移除
    async delTrainingProblem(tid, pid) {
      await delTrainingProblemAPI(tid, pid)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.msg);
            this.getTrainingProblemList();
          }
        })
        .catch((err) => {
          console.log("系统错误");
        });
    },
    indexMethod(index) {
      return (
        (this.probParams.pageNum - 1) * this.probParams.pageSize + index + 1
      );
    },
    indexMethod2(index) {
      return (
        (this.searchParams.pageNum - 1) * this.searchParams.pageSize + index + 1
      );
    },
  },
  watch: {
    searchParams: {
      deep: true,
      handler() {
        this.getTrainingProblemList();
      },
    },
    probParams: {
      deep: true,
      handler() {
        this.getTrainingProbList();
      },
    },
  },
  components: {
    checkProblem,
  },
};
</script>

<style lang="less" scoped>
.trainingCreate {
  margin: auto;
  width: 96%;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .t-header {
    display: flex;

    .t-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .t-search {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .t-s-input {
      height: 30px;
      line-height: 30px;
      width: 20%;
    }

    .t-s-btn {
      width: 120px;
      margin: auto 20px;
    }
  }

  .t-table {
    width: 100%;
    margin: 10px auto 0 auto;

    .t-t-input {
      display: flex;
      justify-content: center;

      .inputNumber {
        width: 100px;
      }
    }

    .t-t-comparation {
      display: flex;
      justify-content: center;

      .nbtn {
        margin: auto 2px;
      }
    }
  }

  .t-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}

.card {
  border-radius: 20px;
  overflow: hidden;

  .container {
    display: flex;
    flex-direction: column;

    .bigtitle {
      border-bottom: 1px solid @bgColor;
      padding-bottom: 10px;
    }

    .c-search {
      display: flex;
      height: 30px;
      line-height: 30px;
      margin: 20px 0 0 0;
      padding-bottom: 10px;
      border-bottom: 2px solid @lineColor;

      .c-s-input {
        height: 30px;
        line-height: 30px;
        width: 20%;
      }

      .c-s-btn {
        width: 80px;
        margin: auto 20px;
      }
    }

    .c-footer {
      margin: auto auto 0 auto;
      padding-top: 5px;
      display: flex;
      justify-content: center;
    }
  }
}

::v-deep(.n-card__content) {
  padding: 10px !important;
}
</style>
